<template>
  <component :is="currentView"></component>
</template>

<script>
  import router from './router'
  import Guest from './views/layouts/Guest'
  import Backend from './views/layouts/Backend'
  import { mapGetters, mapState, mapActions } from 'vuex'
  import RouterGenerator from './utils/RouterGenerator'
  export default {
    name: 'App',
    data() {
      return {
        currentView: 'guest'
      }
    },
    components: {
      guest: Guest,
      backend: Backend
    },
    methods: {
    },
    computed: {
      ...mapGetters([
        'menus',
      ]),
      ...mapState ({
        access_token: state => state.account.access_token
      })
    },
    mounted (){
      if (this.access_token) {
        this.currentView = 'backend';
        // this.fetchProfile();
      } else {
        this.currentView = 'guest'
      }
    },
    watch:{
        access_token () {
            setTimeout(() => {
                if ( this.access_token) {
                    this.currentView = 'backend'
                } else {
                    this.currentView = 'guest'
                }
            }, 0);
        }
    }
  }
</script>

<style>
*{
    box-sizing: border-box;
}
body{
    background:#f5f8fa;
}
.page{
    margin-top: 5px;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #ffffff!important;
    border-top: 0px solid #ffffff!important;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.el-date-editor .el-range-separator {
    padding: 0 5px;
    line-height: 32px;
    width: 10%;
    color: #303133;
}
.el-tabs__active-bar{
    background-color:rgba(248,154,55,1);
}
.el-tabs__item.is-active{
    color:rgba(248,154,55,1);
}
.el-tabs__item:hover{
    color:rgba(248,154,55,1);
}
.el-pager li.active{
    color:rgba(248,154,55,1);
}
.el-pager li:hover{
    color:rgba(248,154,55,1);
}
.el-select .el-input.is-focus .el-input__inner{
    color:rgba(248,154,55,1)!important;
    border-color:rgba(248,154,55,1)!important;
}
.el-pagination__sizes .el-input .el-input__inner:hover{
    border-color:rgba(248,154,55,1)!important;
}
.el-select-dropdown__item.selected{
    color:rgba(248,154,55,1)!important;
}
.el-select .el-input__inner:focus{
    color:rgba(248,154,55,1)!important;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
    color:rgba(248,154,55,1)!important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color:rgba(248,154,55,1)!important;
    border-color:rgba(248,154,55,1)!important;
}
.el-radio__input.is-checked .el-radio__inner {
    border-color: rgba(248,154,55,1)!important;
    background: rgba(248,154,55,1)!important;
}
.el-radio__inner:hover {
    border-color: rgba(248,154,55,1)!important;
}
.el-radio__input.is-checked+.el-radio__label{
    color: rgba(248,154,55,1)!important;
}
.el-card__header{
    background-color: rgba(248,154,55,1)!important;
}
.whiteFont{
    color:#ffffff;
}
.el-pagination {
    margin-top: 10px;
}
</style>
